<script setup lang='ts'>
import { ref } from 'vue';
import bannerLists from "@/views/demo/components/banner-lists/index.vue";
import bannerRanking from "@/views/demo/components/banner-rank/index.vue";
import { getBannerTabs } from '@/api/tabs';

const active = ref(0);
const tabs = ref([]);
getBannerTabs().then((data) => {
    tabs.value = data.list;
    console.log(tabs.value);
});
// footer信号传值（父组件接受孙组件值，并传递给爷组件） 此处为传值出去
const emit = defineEmits();
const sendToDemo = () => {
    emit('msg-to-demo');
    console.log("bannerlists发送成功");
}
// 从demo接受tab状态
const props = defineProps({
    activeTab: {
        type: Number,
        default: 0,
    },
});
</script>

<template>
    <div class="w-full h-full">
        <!-- 根据tab页面切换 -->
        <div class="banner-tabs" v-if="activeTab === 0">
            <van-tabs v-model:active="active" swipeable class="tabs" sticky>
                <van-tab v-for="(tab, index) in tabs" :key="index" :title="tab" class="tab">
                    <!-- footer信号传值（父组件接受孙组件值，并传递给爷组件） 此处为接收孙组件的值 -->
                    <bannerLists @msg-to-banner-tabs="sendToDemo" />
                    <!-- <bannerLists  /> -->

                </van-tab>
            </van-tabs>
        </div>

        <div v-else>
            <bannerRanking />
        </div>
    </div>
</template>

<style scoped>
:deep(.van-tabs__wrap) {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #da193e;
}

:deep(.van-tab__text) {
    font-family: PingFangSC-Regular;
    font-size: 30px;
    line-height: 42px;
    color: #FFD6D8;
    letter-spacing: 0;
    /* text-align: center; */
}

:deep(.van-tabs__nav) {
    background-color: #da193e;
    margin-left: 24px;
}

:deep(.van-tabs__line) {
    background-color: transparent;
}

:deep(.van-tab__content) {
        min-height:100vh;
    }


:deep(.van-tab) {
    width: 164px;
    /* height: 73px; */

    padding: 15px 0 15px;
    /* box-sizing: content-box; */

}

:deep(.van-tab--active) {
    background-image: linear-gradient(0deg, #FA1F42 0%, #FFAE8B 100%);
    border-radius: 36.5px;
    border-radius: 36.5px;

    :deep(.van-tab__text) {
        font-family: PingFangSC-Semibold;
        /* font-size: 30px; */
        color: #FFFFFF;
        letter-spacing: 0;
    }
}

:deep(.van-tabs__nav--line) {
    padding:8px 0;
    /* margin-bottom: 8px; */
}
</style>